<template>
  <view class="container">
    <!-- 操作栏 -->
    <view class="operation-bar">
      <button class="add-button" @click="navigateToAdd">新增孵化记录</button>
    </view>

    <!-- 数据表格 -->
    <uni-table class="data-table" border stripe emptyText="暂无数据">
      <uni-tr>
        <uni-th width="100" align="center">孵化箱编号</uni-th>
        <uni-th width="120" align="center">种鹅品种</uni-th>
        <uni-th width="100" align="center">入孵日期</uni-th>
        <uni-th width="120" align="center">预计出壳日期</uni-th>
        <uni-th width="100" align="center">受精蛋数</uni-th>
        <uni-th width="100" align="center">未受精蛋数</uni-th>
        <uni-th width="100" align="center">出雏数量</uni-th>
        <uni-th width="100" align="center">孵化率</uni-th>
        <uni-th width="100" align="center">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="item in incubationData" :key="item.id">
        <uni-td align="center">{{ item.incubatorCode }}</uni-td>
        <uni-td align="center">{{ item.gooseBreed }}</uni-td>
        <uni-td align="center">{{ item.startDate }}</uni-td>
        <uni-td align="center">{{ item.expectedDate }}</uni-td>
        <uni-td align="center">{{ item.fertilizedEggs }}</uni-td>
        <uni-td align="center">{{ item.unfertilizedEggs }}</uni-td>
        <uni-td align="center">{{ item.hatchedCount }}</uni-td>
        <uni-td align="center">{{ calculateHatchRate(item) }}%</uni-td>
        <uni-td align="center">
          <button class="action-btn" @click="viewDetail(item.id)">详情</button>
          <button class="action-btn" @click="editRecord(item.id)">编辑</button>
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

// 模拟数据
const incubationData = reactive([
  {
    id: 1,
    incubatorCode: 'FX-2023-001',
    gooseBreed: '四川白鹅',
    startDate: '2023-03-15',
    expectedDate: '2023-04-10',
    fertilizedEggs: 150,
    unfertilizedEggs: 20,
    hatchedCount: 135,
    temperatureRecords: [/* 温度记录数据 */],
    remark: '第一批次春季孵化'
  },
  {
    id: 2,
    incubatorCode: 'FX-2025-002',
    gooseBreed: '四川白鹅',
    startDate: '2023-03-15',
    expectedDate: '2023-04-10',
    fertilizedEggs: 150,
    unfertilizedEggs: 20,
    hatchedCount: 135,
    temperatureRecords: [/* 温度记录数据 */],
    remark: '第一批次春季孵化'
  }
]);

// 计算孵化率
const calculateHatchRate = (item) => {
  if (item.fertilizedEggs === 0) return 0;
  return ((item.hatchedCount / item.fertilizedEggs) * 100).toFixed(1);
};

// 导航到详情页
const viewDetail = (id) => {
  uni.navigateTo({
    url: `/pages/incubation/detail?id=${id}`
  });
};

// 编辑记录
const editRecord = (id) => {
  uni.navigateTo({
    url: `/pages/incubation/edit?id=${id}`
  });
};

// 新增记录
const navigateToAdd = () => {
  uni.navigateTo({
    url: '/pages/incubation/add'
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.operation-bar {
  margin-bottom: 20rpx;
  // display: flex;
  // justify-content: flex-end;
}

.add-button {
  background-color: #4CAF50;
  color: white;
  font-size: 28rpx;
  padding: 12rpx 24rpx;
}

.data-table {
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;
  
  ::v-deep .uni-table-th {
    background-color: #f8f9fa;
    font-weight: bold;
  }
}

.action-btn {
  display: inline-block;
  margin: 0 5rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  background-color: #2196F3;
  color: white;
  border-radius: 6rpx;
  
  &:active {
    opacity: 0.8;
  }
}
</style>